<template>
    <div class="page-group">
        <div class="page page-current">
            <!-- 标题栏 -->
            <v-header></v-header>
            <!-- 这里是页面内容区 -->
            <div class="content">
                <div class="card">
                    <div class="card-header">{{ item.post_title }}</div>
                    <div class="card-content">
                        <div class="card-content-inner" v-html="item.post_content"></div>
                    </div>
                    <div class="card-footer">{{item.create_time}} <div class="pull-right" @click="give_star"><span class="icon icon-star" :class="{'tx-red': isStar}"></span></div></div>
                </div>
            </div>
        </div>

        <div class="panel-overlay"></div>
        <left-panel></left-panel>
    </div>
</template>

<script>
    import vHeader from '../components/Header.vue'
    import leftPanel from '../components/LeftPanel.vue'

    export default {
        name: 'Detail',
        components:{
            vHeader, leftPanel
        },
        data(){
            return{
                isStar: false,
                item:{}
            }
        },
        methods:{
            give_star(){
                var _this = this;
                var modal = $.modal({
                    title: 'Thx fot star',
                    text: 'total number of star: 10',
                    buttons: [
                        {
                            text: 'OK',
                            onClick: function (e) {
                                _this.isStar = true
                            }
                        }
                    ]
                })
            }
        },
        mounted (){
            let id = this.$route.query.id;
            if(id){
                var u = process.env.HOST_URL + '/portal/index/api_article';
                this.$http.get(u, {params:{id : id}}).then(function (res) {
                    //console.log(res);return;

                    this.item = res.body.data
                })
            }
        }
    }
</script>

<style>
    .tx-red{
        color:red;
    }
</style>
